<template>
	<!--  -->
	<view>
		<view class="goods-list">
			<!-- <block v-for="(goods, i) in goodsList" :key="i">
				
				<my-goods2 :goods="goods"></my-goods2>
			</block> -->
			<!-- 1.创建点击事件gotoDetail(goods) -->
			<view v-for="(goods, i) in goodsList" :key="i" @click="gotoDetail(goods)">
				
				<my-goods2 :goods="goods"></my-goods2>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
				// 请求参数对象
				queryObj:{
					//查询关键词
					query:'',
					//分类id
					cid:'',
					// 页数索引，默认第1页
					pagenum:1,
					// 每页列表长度，设置10条
					pagesize:10
					
				},
				
				// 获取列表数据
				// 待获取的列表数据，初始为空
				goodsList: [],
				// 待获取总数，初始值为0，用于分页
				total: 0,
				// 默认图片，用于失效图片的填充
				// defaultPic: "../../static/images/gridPicture/电脑.png"
				
				// 定义节流阀关键词，节流阀是否开启标志，false表示未开启
				isLoading: false
			};
		},
		
		onLoad(options){
			// console.log(options)
			// console.log(this.queryObj)
			
			// 参数转存
			this.queryObj.query = options.query || ''
			this.queryObj.cid = options.cid || ''
			
			// 调用获取列表的方法
			this.getGoodsList()
		},
		
		methods:{
			// 获取商品列表数据的方法实现
			// 传入回调函数参数函数cb
			async getGoodsList(cb){
				// 打开节流阀
				this.isLoading = true
				
				// 发起请求
				const {data: res} = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
				console.log(res)
				
				// 关闭节流阀
				this.isLoading = false
				// 传入的回调函数判断
				cb && cb()
				
				// 请求失败
				if(res.meta.status != 200){
					return uni.$showMsg()
				}
				// 请求成功
				// 为数据赋值
				// this.goodsList = res.message.goods
				// 新旧数据拼接
				this.goodsList = [...this.goodsList,...res.message.goods]
				console.log(this.goodsList)
				
				this.total = res.message.total
				console.log(this.total)
			},
			
			// 2. 在method中实现跳转到商品详情页的方法
			gotoDetail(goods){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id=' +goods.goods_id
				})
				console.log(goods.goods_id)
			}
		},
		
		onReachBottom(){
			if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total){
				return uni.$showMsg('数据加载完毕！')
			}
			
			// isLoading=true,表示正在发起请求其它数据，这次触底就不再进行数据加载获取
			if(this.isLoading){
				return
			}
			
			// isLoading=false,表示发起请求其它数据结束，这次触底结束后进行数据加载获取
			// 让页码值自增1
			this.queryObj.pagenum += 1
			// 调用获取商品列表的方法/功能函数
			this.getGoodsList()
			
		},
		
		onPullDownRefresh() {
			// 重置关键数据
			this.queryObj.pagenum = 1
			this.total = 0
			this.isLoading = false
			this.goodsList = []
			
			// 重新发起数据请求
			this.getGoodsList(() => uni.stopPullDownRefresh())
		}
	}
</script>

<style lang="scss">
	
</style>
